<!DOCTYPE HTML>
<html>

<head>
    <style type="text/css">
        #div1,
        #div2 {
            float: left;
            width: 198px;
            height: 66px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <script type="text/javascript">
        function drag(e) {
            e.dataTransfer.setData('Text', e.target.id);
        }

        function allowDrop(e) {
            e.preventDefault();
        }

        function drop(e) {
            e.preventDefault();
            var data = e.dataTransfer.getData('Text');
            e.target.appendChild(document.getElementById(data));
        }
    </script>
</head>

<body>
    <div id="div1" ondragover="allowDrop(event)" ondrop="drop(event)">
        <img id='drag1' src="../images/w3c.gif " ondragstart="drag(event)" draggable="true">
    </div>
    <div id="div2" ondragover="allowDrop(event)" ondrop="drop(event)">

    </div>


</body>

</html>